{% extends '_layout/base.html' %}
{% load i18n %}
{% load static %}

{% block pageTitle %}

{% endblock %}

{% block pageHeadExtra %}
  <link href="https://cdn.bootcss.com/jquery.perfect-scrollbar/0.8.1/css/perfect-scrollbar.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery.perfect-scrollbar/0.8.1/js/perfect-scrollbar.jquery.min.js"></script>
  <link href="{% static 'css/modal-dialog.css' %}" rel="stylesheet">
  <link href="{% static 'css/mlplatform/square/green.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/imagerecognize/model.css' %}">
  <link rel="stylesheet" href="{% static 'css/search/results.css' %}">
  <link rel="stylesheet" href="{% static 'css/basic/header_footer.css' %}">
  <script src="{% static 'js/mlplatform/icheck.js' %}"></script>

{% endblock %}

{% block pageBody %}
  {% include 'basic/header.html' %}
  <div class="page container">
    <h1>
      {% trans 'Image Recognize' %}
    </h1>
      <button id="cancel" class="btn btn-info" onclick="create_Task()">
          <i class="fa fa-plus" aria-hidden="true"></i>
          {% trans 'Create a task' %}
      </button>
{#      <button id="add-new-template" class="btn btn-lg">{% trans 'Add new template based on this' %}</button>#}
      <div class="dividing" id="task_div"></div>

{#创建任务#}
      <div id="new_task">
          <h3>{% trans 'New Task' %}</h3>
        <div class="panel panel-success">
          <div class="panel-body">
              <input type="hidden" id="i-kid" data-tid="{{ object }}">
              <div class="row">
                 <div class="col-lg-6">
                      <div class="form-group required">
                        <label class="control-label" for="t-title">{% trans 'Name' %}</label>
                        <input class="form-control" id="t-title" name="t-title" placeholder="{% trans 'Name(required)' %}"
                               data-vf="true" data-vf-regex="^$|^_.*|.*\\..*" data-vf-inverse="true"
                               data-vf-help="{% trans 'This field cannot be empty or start with `_` or contains `.`' %}" required>
                      </div>
                 </div>
                  <div class="col-lg-6">
                     <div class="form-group required">
                        <label class="control-label" for="t-abstract">{% trans 'Abstract' %}</label>
                        <input class="form-control" id="t-abstract" name="t-abstract" placeholder="{% trans 'Abstract' %}"
                            data-vf="true" data-vf-regex="^$|^_.*|.*\\..*" data-vf-inverse="true"
                            data-vf-help="{% trans 'This field cannot be empty or start with `_` or contains `.`' %}" required>
                    </div>
                  </div>
                  <div class="task-actions">
                      <button id="submit-task" class="btn btn-lg">{% trans 'Start Train' %}</button>
                  </div>
              </div>
          </div>

        </div>
        <div class="panel panel-info">
            <div class="panel-body">
                <h4 id="section-1" class="text-left">{% trans 'Classes' %}</h4>
                    <div id="services1" class="services-section section-global-wrapper">
                        <div id="createmodel">
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" id="create_model"
                                 data-toggle="modal" style="cursor: pointer">
                                <div class="services-group wow animated fadeInLeft" id="svm">
                                    <p class="services-icon" style="text-align: center">
                                        <span class="fa fa-plus fa-5x"></span>
                                    </p>
                                    <h4 class="services-title">{% trans 'Create a class' %}</h4>
                                </div>
                            </div>
                        </div>
                        <div id="createTestclass"></div>
                    </div>
            </div>
        </div>
      </div>
      <div class="dividing" id="class_div"></div>

{#      创建分类#}
      <div id="new_class">
        <h3>{% trans 'New Class' %}</h3>
        <div class="panel panel-success">
          <div class="panel-body">
              <input type="hidden" id="i-kid">
              <div class="row">
                 <div class="col-lg-6">
                      <div class="form-group required">
                        <label class="control-label" for="t-title">{% trans 'Class Name' %}</label>
                        <input class="form-control" id="ta-title" name="ta-title" placeholder="{% trans 'Name(required)' %}"
                               data-vf="true" data-vf-regex="^$|^_.*|.*\\..*" data-vf-inverse="true"
                               data-vf-help="{% trans 'This field cannot be empty or start with `_` or contains `.`' %}" required>
                      </div>
                 </div>
                  <div class="col-lg-6">
                     <div class="form-group required">
                        <label class="control-label" for="t-abstract">{% trans 'Abstract' %}</label>
                        <input class="form-control" id="ta-abstract" name="ta-abstract" placeholder="{% trans 'Abstract(required)' %}"
                            data-vf="true" data-vf-regex="^$|^_.*|.*\\..*" data-vf-inverse="true"
                            data-vf-help="{% trans 'This field cannot be empty or start with `_` or contains `.`' %}" required>
                    </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6 col-sm-6">
                      <div class="input-group">
{#                        <input id="true-file" type="file" style="display: none;" onchange="Utils.afterChooseFile(this)"#}
{#                               multiple accept=".jpeg, .png, .zip">#}
                        <input class="form-control" id="true-file" type="file" style="display: none;" onchange="Utils.uploadFile(this)"
                               multiple accept=".jpeg, .png, .zip, .jpg">
{#                        <input class="form-control" id="upload" placeholder="{% trans 'Choose your data file then upload it' %}"#}
{#                               disabled>#}
                        <div class="input-group-btn">
                          <button class="btn btn-info" type="button" onclick="Utils.chooseFile(this)">
                            {% trans 'Upload' %}
                            <i class="fa fa-upload" aria-hidden="true"></i>
                          </button>
                        </div>
                      </div>
                    </div>
{#                    <div class="col-lg-6 col-sm-6">#}
{#                      <button id="upload-file" class="btn btn-primary" type="button">#}
{#                        {% trans 'Upload' %}#}
{#                        <i class="fa fa-upload"></i>#}
{#                      </button>#}
{#                    </div>#}
                  </div>
                <div class="dividing"></div>
                <div id="image_container">
                    <div class="col-lg-12 horizontal statistic small">
                        <div id="image-count" class="value"></div>
                        <div class="label">{% trans 'Results' %}</div>
                    </div>
                </div>

                  <div class="content col-lg-12">
                    <div class="cases_desc" id="image_show">
{#                      <img class="img-thumbnail" width="150" src="{% get_media_prefix %}{{ 'images/test.jpeg' }}">#}
                    </div>
                  </div>
            </div>
        </div>
        <div class="template-actions">
          <button id="save-template" class="btn btn-lg">{% trans 'Save' %}</button>
          <button id="cancel_class" class="btn btn-lg">{% trans 'Cancel' %}</button>
          <button id="add-new-template"
                  class="btn btn-lg hidden">{% trans 'Add new template based on this' %}</button>
        </div>
      </div>


  </div>

  {% include 'basic/footer.html' %}
{% endblock %}

{% block pageFootExtra %}
    <script src="{% static 'js/imagerecognize/image.js' %}"></script>
{% endblock %}
